<template>
  <el-dialog title="修改友情链接" :visible.sync="dialogVisible" width="40%">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" >
      <el-form-item label="链接名称" prop="name">
        <el-input placeholder="" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="链接地址" prop="url">
        <el-input placeholder="" v-model="form.url"></el-input>
      </el-form-item>

      <el-form-item label="链接缩略图">
        <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:8089/admin/LinkCtl/uploadLinkimg"
            :headers="{adminToken:adminToken}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">

          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>


    </el-form>
    <span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save('form')">保存</el-button>
		</span>
  </el-dialog>
</template>

<script>
export default {
  name: "Add",
  data() {
    return {
      dialogVisible: false,
      newsTypeList: [],
      imageUrl:'',
      adminToken: "",
      overurl:'http://127.0.0.1:8088/',
      form: {
        id:'',
        name: '',
        url:'',
        picture:'',
        state:''
      },
      flag:true,
      rules: {
        name: [{
          required: true,
          message: '请输入新增的链接名称！',
          trigger: 'blur'
        },
          {
            min: 1,
            max: 15,
            message: '长度在 1 到 15 个字符',
            trigger: 'blur'
          }
        ],
        url: [{
          required: true,
          message: '请输入的链接地址！',
          trigger: 'blur'
        },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur'
          }
        ],
      },
    }
  },
  methods: {
    findLinkById(id){
      this.$http.get("admin/LinkCtl/findLinkById?id="+id).then((resp) => {
        this.form=resp.data.data;
        this.imageUrl = this.overurl+this.form.picture;
      })

    },

    save(reffrom) {
      //数据向后端发送进行验证
      //$refs是一个引用

      this.$refs[reffrom].validate((valid) => {
        if (valid) {
          //如果发送成功，跳转到其他组件
          //【跳转语句】
          this.$http.post("admin/LinkCtl/saveLink", this.form).then((resp) => {
            if (resp.data.code == 200) {
              this.$message({
                showClose: true,
                message: '恭喜你，修改成功✔',
                type: 'success'
              });
              this.$router.go();
            }
          })
        }
      });

    },
    handleAvatarSuccess(res, file) {
      //前端临时压缩
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code==401){
        alert("token验证失败")
      }
      if(res.code==500){
        alert("系统忙");
      }
      if(res.code==200){
        this.form.picture = res.data;
      }

    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }
  },
  mounted() {
   this.adminToken= sessionStorage.getItem("adminToken");
  }
}
</script>